<template>
  <el-row type="flex" class="auth-box">
    <el-col :span="6"></el-col>
    <el-col :span="12">
      <el-alert v-if="errMsg" :title="errMsg" type="error" show-icon></el-alert>
      <el-tabs v-model="activeTab" @tab-click="handleClick">
        <el-tab-pane label="登录" name="login">
          <AuthForm
            :form="form"
            formType="login"
            :onSubmitReq="handleAuthReq"
            ref="form"
            :rules="loginRules"
          ></AuthForm>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <AuthForm
            :form="form"
            :onSubmitReq="handleAuthReq"
            :rules="registerRules"
          ></AuthForm>
        </el-tab-pane> </el-tabs
    ></el-col>
    <el-col :span="6"></el-col>
  </el-row>
</template>

<script>
import AuthForm from '@/components/AuthForm';

export default {
  data() {
    var checkPasswordConfirm = (rule, value, callback) => {
      if (value != this.form.password) {
        return callback(new Error("两次密码不一致"));
      }
      callback();
    };
    return {
      activeTab: 'login',
      errMsg: '',
      form: {
        username: '',
        password: '',
        password_confirm: '',
      },
      loginRules: {
        username: [{ required: true, message: '不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
      registerRules: {
        username: [{ required: true, message: '不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '不能为空', trigger: 'blur' }],
        password_confirm: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {validator:checkPasswordConfirm, trigger:'blur'}
        ],
      },
    };
  },
  mounted(){
    if(this.$route.params.msg){
      this.errMsg = this.$route.params.msg
    }
  },
  components: {
    AuthForm,
  },
  methods: {
    handleClick(tab) {
      this.activeTab = tab.name;
    },
    handleAuthReq() {
      let url = '';
      if (this.activeTab == 'register') {
        url = 'register/';
      } else if (this.activeTab == 'login') {
        url = 'login/';
      }
      if (url == '') {
        return;
      }
      this.$http
        .post(url, this.form)
        .then((res) => {
          const { data } = res;
          localStorage.token = data.tokens.access;
          localStorage.refresh = data.tokens.refresh;
          localStorage.id = data.id;
          localStorage.info = data.info
          this.$store.commit('setLogin', true);
          this.$store.commit('setId', data.id);
          this.$router.push({
            name: 'User',
            params: { id: data.id, fromAuth:true },
          });
        })
        .catch((err) => {
          if (err.response) {
            const { status } = err.response;
            switch (status) {
              case 401:
                this.errMsg = '用户名或者密码错误';
                break;
              case 400:
                this.errMsg = '用户已存在';
                break;
            }
          }
        });
    },
  },
};
</script>

<style scoped>
.auth-box {
  margin-top: 5em;
}
</style>
